<script setup>

import {Close, More} from "@element-plus/icons-vue";
import {ref} from "vue";
const emit = defineEmits(["getTaskList"]);
import {addTaskEnums} from "@/enums/task.js";
import {addTask} from "@/api/task.js";
import {ElMessage} from "element-plus";
const bgList = ref(addTaskEnums);
const addBgImg = ref(null);
const addTaskName = ref(null);
const showAddTask = ref(false);

// 显示组件
const show = () => {
  showAddTask.value = true;
  addBgImg.value = null;
  addTaskName.value = null;
}
defineExpose({
  show
})
const close = () => {
  showAddTask.value = false;
  addBgImg.value = null;
  addTaskName.value = null;
}

const handleAddTask = async () => {
  if (addBgImg.value == null) {
    return ElMessage.error("请选择看板背景");
  }
  if (addTaskName.value == null || addTaskName.value === '') {
    return ElMessage.error("请输入看板名称");
  }
  const param = {
    bgColor: addBgImg.value,
    taskName: addTaskName.value
  }
  console.log("===== c ======",param)
  let res = await addTask(param)
  if (res.code === 200) {
    ElMessage.success("添加成功");
    close();
    emit("getTaskList")
  } else {
    ElMessage.error(res.message);
  }
}
</script>

<template>
 <transition name="el-zoom-in-top">
   <div class="add-task-box" v-show="showAddTask">
     <div class="add-task-title" >
       创建看板
       <el-icon class="add-task-close" @click="showAddTask = false">
         <Close/>
       </el-icon>
     </div>
     <div>
       <h1 class="add-title">看板预览</h1>
       <div :style="addBgImg == null?bgList[0]:addBgImg" class="add-task-preview flex-center-center">
         <img src="https://trello.com/assets/14cda5dc635d1f13bc48.svg" alt="">
       </div>
     </div>
     <div class="add-task-bgImg">
       <h1 class="add-title">看板背景</h1>
       <div class="bg-list">
         <div class="bg-item pointer"
              :class="addBgImg === item ? 'add-bgImg-active':''"
              v-for="(item, index) in bgList" :key="index"
              :style="item"
              @click="addBgImg = item"></div>
         <div class="more pointer">
           <el-icon>
             <More></More>
           </el-icon>
         </div>
       </div>
     </div>
     <div class="mb--4">
       <h1 class="add-title">看板标题</h1>
       <el-input v-model="addTaskName" placeholder="请输入看板名称..."></el-input>
     </div>
     <div class="add-btn">
       <el-button type="primary" style="width: 100%" :disabled="!addTaskName" @click="handleAddTask">创建</el-button>
     </div>
   </div>
 </transition>
</template>

<style scoped lang="less">
.add-task-box {
  position: absolute;
  bottom: -470px;
  left: -180px;
  width: 270px;
  height: 455px;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.15);
  .add-task-title {
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: relative;
    .add-task-close {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
    }
    //background: #2465ff;
    .title-name {
      flex-basis: 90%;
      text-align: center;
    }
  }
  .add-task-bgImg {

    .bg-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
      .bg-item {
        width: 40px;
        height: 32px;
        margin: 5px 10px;
        border-radius: 5px;
      }

    }
  }
}

.add-task-preview {
  height: 120px;
  width: 80%;
  margin: 0 auto 10px;
  border-radius: 10px;
}
.add-title {

  font-size: 14px;
  height: 30px;
  font-weight: bold;
}
//创建看板被选择时触发
.add-bgImg-active {
  border: 2px solid #000;
}
.more {
  width: 40px;
  height: 32px;
  margin: 5px 10px;
  border-radius: 5px;
  text-align: center;
  line-height: 32px;
  background: #e8e8e8;
}
</style>
